<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片区域 -->
    <el-card>
      <!-- 添加按钮区域 -->
      <el-button type="primary" @click="showaddCateDialog">添加分类</el-button>
      <!-- 表格区域 -->
      <el-table
        :data="cateList"
        style="width: 100%;"
        border
        stripe
        row-key="cat_id"
        lazy
        :load="onLoadChildren"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column label="#" type="index"> </el-table-column>
        <el-table-column prop="cat_name" label="分类名称"> </el-table-column>
        <el-table-column prop="cat_deleted" label="是否有效">
          <template #default="{row}">
            <i
              class="el-icon-success"
              v-if="!row.cat_deleted"
              style="color: #67c23a;"
            ></i>
            <i class="el-icon-error" v-else style="color: #f56c6c;"></i>
          </template>
        </el-table-column>
        <el-table-column label="排序">
          <template #default="{row}">
            <el-tag v-if="row.cat_level === 0" type="primary" effect="dark"
              >一级</el-tag
            >
            <el-tag v-else-if="row.cat_level === 1" type="success" effect="dark"
              >二级</el-tag
            >
            <el-tag v-else effect="dark" type="info">三级</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{}">
            <el-button type="primary" class="el-icon-edit" size="mini"
              >编辑</el-button
            >
            <el-button type="danger" class="el-icon-delete" size="mini"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="cateData.pagenum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="cateData.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="cateData.total"
      >
      </el-pagination>
    </el-card>

    <!-- 添加分类对话框 -->
    <el-dialog
      title="添加分类"
      :visible.sync="addCate.addCateDialogVisible"
      width="50%"
      @close="addCateDialogClosed"
    >
      <!-- 添加分类表单区域 -->
      <el-form
        :model="addCate.addCateForm"
        :rules="addCate.addCateRules"
        ref="addCateFormRef"
        label-width="100px"
      >
        <el-form-item label="分类名称" prop="cat_name">
          <el-input v-model="addCate.addCateForm.cat_name"></el-input>
        </el-form-item>
        <el-form-item label="父级分类">
          <!-- options 用来指定数据源 -->
          <!-- props用来指定配置对象 -->
          <!-- handleChange只要级联选择器的选项发生了变化，就会触发这个函数 -->
          <el-cascader
            v-model="addCate.selectedKeys"
            :options="addCate.parentCateList"
            :props="addCate.cascaderProps"
            @change="handleChange"
            clearable
            change-on-select
            expandTrigger="hover"
          ></el-cascader>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addCate.addCateDialogVisible = false"
          >取 消</el-button
        >
        <el-button type="primary" @click="addCateGory">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 商品分类数据
      cateList: [],
      cateData: {
        // 当前显示的页码值
        pagenum: 1,
        // 每页显示多少条数据
        pagesize: 5,
        // 当前请求回来的一级数据的总条数
        total: 0,
      },
      // 添加分类
      addCate: {
        addCateDialogVisible: false,
        // 表单验证区域
        addCateForm: {
          // 分类名称
          cat_name: '',
          // 分类父id,默认添加一级分类
          cat_pid: 0,
          // 分类层级,默认为一级分类
          cat_level: 0,
        },
        // 验证规则对象
        addCateRules: {
          cat_name: [
            { required: true, message: '请输入分类名称', trigger: 'blur' },
          ],
        },
        // 存储父级分类数据
        parentCateList: [],
        // 级联选择器中选中的父级分类的数组
        selectedKeys: [],
        // 级联选择器的配置对象
        cascaderProps: {
          value: 'cat_id',
          label: 'cat_name',
          children: 'children',
        },
      },
    };
  },
  created() {
    //   页面一加载就将商品分类的数据请求回来
    this.getCateList();
  },
  methods: {
    async getCateList() {
      const { data: res } = await this.$http.get('categories', {
        params: {
          type: 1,
          pagenum: this.cateData.pagenum,
          pagesize: this.cateData.pagesize,
        },
      });
      if (res.meta.status !== 200) {
        return this.$Elementui.Message.warning('获取商品分类数据失败！');
      }
      // console.log(res.data);
      // 利用数组的映射，给数组的每一个元素都添加上hasChildren = true
      res.data.result.map((item) => {
        item.hasChildren = true;
        return item;
      });
      this.cateList = res.data.result;
      this.cateData.total = res.data.total;
    },
    // 懒加载触发函数，当用户点击父节点的展开项之后就会触发此函数
    async onLoadChildren(tree, treeNode, resolve) {
      // console.log('懒加载：', tree, treeNode, resolve);
      // 发起请求，将有children的数据加载出来
      const { data: res } = await this.$http.get(
        `categories/pid/${tree.cat_id}`
      );
      res.data.forEach((item) => (item.hasChildren = true));
      resolve(res.data);
    },

    // 定义分页功能中的每页显示多少条的方法
    handleSizeChange(newSize) {
      this.cateData.pagesize = newSize;
      this.cateData.pagenum = 1;
      this.getCateList();
    },
    handleCurrentChange(newPage) {
      this.cateData.pagenum = newPage;
      this.getCateList();
    },
    // 显示添加分类对话框
    showaddCateDialog() {
      // 获取父级分类的数据
      this.getParentCateList();
      // 弹出添加分类的对话框
      this.addCate.addCateDialogVisible = true;
    },
    // 获取父级分类
    async getParentCateList() {
      const { data: res } = await this.$http.get('categories', {
        params: {
          type: 2,
        },
      });
      if (res.meta.status !== 200) {
        return this.$Elementui.Message.error('获取父级分类数据失败！');
      }
      this.addCate.parentCateList = res.data;
    },
    // 级联选择器事件,当级联选择器的选择项发生了变化就会触发这个函数
    handleChange() {
      // console.log(this.addCate.selectedKeys);
      // 如果selectedKeys数组中的长度大于零，证明有父级分类被选中了，反之，则证明没有父级分类被选中了
      if (this.addCate.selectedKeys.length > 0) {
        // 设置当前要添加的分类的父级id 就是this.addCate.selectedKeys数组中的最后一项
        this.addCate.addCateForm.cat_pid = this.addCate.selectedKeys[
          this.addCate.selectedKeys.length - 1
        ];
        // 分类等级就是当前数组的长度
        this.addCate.addCateForm.cat_level = this.addCate.selectedKeys.length;
      } else {
        // 当前父分类的id
        this.addCate.addCateForm.cat_pid = 0;
        // 当前分类的等级
        this.addCate.addCateForm.cat_level = 0;
      }
    },
    // 添加分类
    addCateGory() {
      // console.log(this.addCate.addCateForm);
      this.$refs.addCateFormRef.validate(async (valid) => {
        if (!valid) return;
        const { data: res } = await this.$http.post(
          'categories',
          this.addCate.addCateForm
        );
        if (res.meta.status !== 201) {
          return this.$Elementui.Message.error('添加分类失败！');
        }
        this.getCateList();
        this.$Elementui.Message.success('添加分类成功！');
        this.addCate.addCateDialogVisible = false;
      });
    },
    // 监听对话框的关闭事件，重置对话框
    addCateDialogClosed() {
      this.$refs.addCateFormRef.resetFields();
      this.addCate.selectedKeys = [];
      // 当前父分类的id
      this.addCate.addCateForm.cat_pid = 0;
      // 当前分类的等级
      this.addCate.addCateForm.cat_level = 0;
    },
  },
};
</script>

<style lang="less" scoped>
.el-card {
  margin-top: 15px;
  .el-button {
    margin: 10px;
  }
  .el-pagination {
    margin-top: 15px;
  }
}
.el-cascader {
  width: 100%;
}
</style>
